<template>
	<div>
		<div class="jnsb">
			<div class="jnsb_left">
				<div class="hynr">
					<img src="@/assets/images/a1.png" />
					<p>张一一</p>
				</div>
				<div class="nav">
					<ul>
						<li class="cur"><router-link to='/'>我的工单</router-link></li>
						<li><router-link to="/page2">缺陷录入</router-link></li>
						<li class="cur"><router-link to="/page3">安灯</router-link></li>
						<li><router-link to="/page4">看板</router-link></li>
					</ul>
				</div>
				<div class="fhjt"><img src="@/assets/images/a6.png" />工站切换</div>
			</div>
			<div class="jnsb_right">
				<div class="scjs">
					<div class="scjs_top">
						<ul>
							<li>车间：第5车间</li>
							<li>生产产品：产品名称产品名称</li>
							<li>良品数量：16252个</li>
							<li>班次：1234次</li>
							<li>数量：2828277个</li>
							<li>不良数量：393个</li>
							<li>生产工单：192828个</li>
							<li>工作日期：09-10</li>
							<li>返工数量：111个</li>
						</ul>
					</div>
					<div class="scjs_bottom">
						<ul>
							<li>完成率 54%<span><b style=" width: 54%;"></b></span></li>
							<li>合格率 37%<span><em style="width: 37%;"></em></span></li>
						</ul>
					</div>
				</div>
				<div class="kjrh">
					<div class="hjrh_tp"><img src="@/assets/images/a7.png" /></div>
					<ul>
						<li>
							<a href="">
								<span class="hjrhtext">
									<h2>工单开工</h2>
									<p>点击考试工单</p>
								</span>
							</a>
						</li>
						<li class="bindEnter" @click="bindAlt=true">
							<a href="javascript:void(0)">
								<span class="hjrhtext">
									<h2>物料绑定</h2>
									<p>点击绑定物料</p>
								</span>
							</a>
						</li>
						<li>
							<a href="">
								<span class="hjrhtext">
									<h2>工单完工</h2>
									<p>点击即可完成工单</p>
								</span>
							</a>
						</li>
						<li>
							<a href="">
								<span class="hjrhtext">
									<h2>箱条码打印</h2>
									<p>点击打印箱条码</p>
								</span>
							</a>
						</li>
						<li>
							<a href="">
								<span class="hjrhtext">
									<h2>开始计时</h2>
									<p>点击开始计时</p>
								</span>
							</a>
						</li>
						<li class="reportEnter" @click="reportEnter=true">
							<a href="javascript:void(0)">
								<span class="hjrhtext">
									<h2>工单汇报</h2>
									<p>点击进入工单汇报</p>
								</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="screen">

		</div>
		<!--工作汇报-->
		<div class="altReport" v-if="reportEnter">
			<h2>工单汇报</h2>
			<ul>
				<li>
					<p>工单编号</p>
					<input type="text" name="" id="" value="" />
				</li>
				<li>
					<p>产线编号</p>
					<input type="text" name="" id="" value="" />
				</li>
				<li>
					<p>计划数量</p>
					<input type="text" name="" id="" value="" />
				</li>
				<li>
					<p>完成数量</p>
					<input type="text" name="" id="" value="" />
				</li>
				<li>
					<p>汇报数量</p>
					<input type="text" name="" id="" value="" />
				</li>
			</ul>
			<div class="reportBtn">
				<a href="javascript:void(0)" @click="reportEnter=false">确定</a>
				<a href="javascript:void(0)" class="esc" @click="reportEnter=false">取消</a>
			</div>
		</div>
		<!-- 物料绑定 -->
		<div class="bindAlt" v-if="bindAlt">
			<h2>物料绑定</h2>
			<div class="bindNotice">
				<input type="text" placeholder="请扫描物料条码" name="" id="" value="" />
			</div>
			<div class="bindTable">
				<table cellspacing="0" cellpadding="0">
					<tr>
						<th>工单编号</th>
						<th>物料编号</th>
						<th>绑定时间</th>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</table>
			</div>
			<div class="reportBtn">
				<a href="javascript:void(0)" @click="bindAlt=false">确定</a>
			</div>
		</div>
	</div>

</template>

<script setup>
	import {
		useCounterStore
	} from '@/stores/counter';
	const {
		proxy
	} = getCurrentInstance()
	const counter = useCounterStore();
	const route = useRoute();
	const router = useRouter();

	const bindAlt = ref(false)

	const reportEnter = ref(true)
</script>
<style lang='scss'></style>